<template>
    <div class="navbar">
        <van-nav-bar 
            :title="title"
            left-text="返回"
            left-arrow 
            @click-left="handleBack" 
        />
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
// 当前路由对象实例
import { useRouter } from 'vue-router';
// 当前路由信息
import { useRoute } from 'vue-router';

const router = useRouter()
const route = useRoute()

// 根据当前激活的路由信息，获取路由元信息中配置的 title
const title = computed(() => route.meta ?. title ?? '')

const handleBack = ()=> {
    router.back()
}
</script>

<style scoped></style>
